<template>
	<view class="verification-container">
		<!-- 蓝色背景区域 -->
		<view class="blue-background"></view>
		
		<!-- 输入区域：只在非扫码跳转时显示 -->
		<view class="header-input-container" v-if="!fromScan">
			<view class="input-card">
				<text class="input-label">输入核销码</text>
				<view class="input-wrapper">
					<input 
						class="verification-input" 
						v-model="verificationCode" 
						placeholder="" 
						type="text"
						maxlength="20"
					/>
					<text class="identify-text" @click="identifyCode">识别</text>
				</view>
			</view>
		</view>
		
		<!-- 核销详情页面 -->
		<view class="detail-container" :class="{ 'no-input': fromScan }" v-if="showDetail">
			<!-- 统一的内容卡片 -->
			<view class="content-card">
				<!-- 核销码显示 -->
				<view class="code-display">
					<text class="code-text">核销码 {{ detailInfo.code }}</text>
				</view>
				
				<!-- 服务内容 -->
				<view class="service-section">
					<text class="section-title">服务内容</text>
					<view class="service-content">
						<text class="service-name">{{ detailInfo.serviceName }}</text>
						<view class="service-list">
							<text class="service-item" v-for="(item, index) in detailInfo.services" :key="index">• {{ item }}</text>
						</view>
						<text class="service-note">{{ detailInfo.serviceNote }}</text>
					</view>
				</view>
				
				<!-- 订单信息 -->
				<view class="order-section">
					<text class="section-title">订单信息</text>
					<view class="order-info">
						<view class="info-row">
							<text class="info-label">订单价格:</text>
							<text class="info-value">¥{{ detailInfo.orderPrice }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">实付金额:</text>
							<text class="info-value">¥{{ detailInfo.actualAmount }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">优惠金额:</text>
							<text class="info-value">¥{{ detailInfo.discountAmount }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">订单编号</text>
							<text class="info-value">{{ detailInfo.orderNumber }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">支付时间</text>
							<text class="info-value">{{ detailInfo.paymentTime }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">预约时间</text>
							<text class="info-value">{{ detailInfo.appointmentTime }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 确认核销按钮 -->
			<view class="confirm-section">
				<button 
					class="confirm-btn" 
					:class="{ 'verified-btn': isVerified }"
					@click="showConfirmDialog"
					:disabled="isVerified"
				>
					{{ isVerified ? '已核销' : '确认核销' }}
				</button>
			</view>
		</view>
		
		<!-- 确认弹窗 -->
		<view class="modal-overlay" v-if="showModal" @click="hideConfirmDialog">
			<view class="modal-dialog" @click.stop>
				<view class="modal-header">
					<text class="modal-title">核销此订单</text>
				</view>
				<view class="modal-content">
					<text class="modal-message">请您仔细核对订单,此操作不可撤销</text>
					<text class="modal-warning">请谨慎操作!</text>
				</view>
				<view class="modal-actions">
					<button class="cancel-btn" @click="hideConfirmDialog">取消</button>
					<button class="confirm-modal-btn" @click="confirmVerification">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			verificationCode: '',
			showDetail: false,
			showModal: false,
			isVerified: false,
			fromScan: false, // 是否来自扫码页面
			detailInfo: {
				code: '',
				serviceName: '',
				services: [],
				serviceNote: '',
				orderPrice: '',
				actualAmount: '',
				discountAmount: '',
				orderNumber: '',
				paymentTime: '',
				appointmentTime: ''
			}
		}
	},
	methods: {
		identifyCode() {
			if (!this.verificationCode.trim()) {
				uni.showToast({
					title: '请输入核销码',
					icon: 'none'
				})
				return
			}

			uni.showLoading({
				title: '识别中...'
			})

			// 模拟API调用
			setTimeout(() => {
				uni.hideLoading()
				
				// 特殊处理：输入"11"时显示特定信息
				if (this.verificationCode === '11') {
					this.showDetailInfo()
				} else {
					const isValid = this.validateCode(this.verificationCode)
					if (isValid) {
						uni.showToast({
							title: '识别成功',
							icon: 'success'
						})
						this.showDetailInfo()
					} else {
						uni.showToast({
							title: '核销码无效',
							icon: 'none'
						})
					}
				}
			}, 1500)
		},
		
		// 显示详情信息
		showDetailInfo() {
			this.detailInfo = {
				code: 'MC1234-5678-9012',
				serviceName: 'XXX标准洗车服务',
				services: [
					'整车泡沫冲洗擦T',
					'轮胎轮毂冲洗清洁',
					'车内吸尘',
					'内饰脚垫简单除尘'
				],
				serviceNote: '(不包含虫户、水泥、沥青和顽固污渍清理等)',
				orderPrice: '30.00',
				actualAmount: '25.00',
				discountAmount: '5.00',
				orderNumber: '2020032554565799',
				paymentTime: '2020.03.30 14:40:45',
				appointmentTime: '2020.03.30 14:40'
			}
			this.showDetail = true
		},
		
		// 显示确认弹窗
		showConfirmDialog() {
			this.showModal = true
		},
		
		// 隐藏确认弹窗
		hideConfirmDialog() {
			this.showModal = false
		},
		
		// 确认核销
		confirmVerification() {
			// 隐藏弹窗
			this.showModal = false
			
			uni.showLoading({
				title: '核销中...'
			})

			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '核销成功',
					icon: 'success'
				})
				
				// 设置核销状态
				this.isVerified = true
				
				// 不自动清空，保持当前状态
				// 用户可以继续查看核销信息
			}, 1000)
		},
		
		validateCode(code) {
			// 简单的验证逻辑，可根据实际需求调整
			return code.length >= 2 && /^[A-Za-z0-9]+$/.test(code)
		}
	},
	
	onLoad(options) {
		// 检测是否来自扫码页面
		if (options.from === 'scan') {
			this.fromScan = true
			// 自动显示模拟内容
			this.showDetailInfo()
		}
	}
}
</script>

<style scoped>
/* 页面整体容器：为固定输入框预留空间 */
.verification-container {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
	padding-top: 200rpx; /* 为导航栏(88rpx) + 输入框区域(112rpx)预留空间 */
	box-sizing: border-box;
	position: relative;
}

/* 蓝色背景区域：固定定位，占页面高度的四分之一 */
.blue-background {
	width: 100%;
	height: 25vh; /* 占视口高度的四分之一 */
	background-color: #007AFF;
	position: fixed;
	top: 88rpx; /* 导航栏高度 */
	left: 0;
	z-index: 0;
}

/* 输入容器：固定在页面顶部 */
.header-input-container {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	position: fixed;
	top: 88rpx; /* 导航栏高度 */
	left: 0;
	z-index: 10;
}

/* 输入卡片 */
.input-card {
	width: 92%;
	background-color: white;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.input-label {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
	flex-shrink: 0;
	white-space: nowrap;
}

/* 输入框包装器 */
.input-wrapper {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

.verification-input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 10rpx;
	padding: 0 20rpx;
	padding-right: 80rpx; /* 为识别文字预留空间 */
	font-size: 30rpx;
	background-color: white;
	box-sizing: border-box;
}

.verification-input:focus {
	border-color: #007AFF;
	outline: none;
}

/* 识别文字 */
.identify-text {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 30rpx;
	color: #007AFF;
	font-weight: bold;
	pointer-events: auto;
	cursor: pointer;
	z-index: 10;
}

.identify-text:active {
	color: #0056CC;
}

/* 详情页面样式 - 固定在屏幕中间 */
.detail-container {
	width: 100%;
	height: calc(100vh - 285rpx); /* 减去顶部固定区域高度 */
	position: fixed;
	top: 290rpx; /* 在输入框下方 */
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
}

/* 当没有输入框时，详情容器从顶部开始 */
.detail-container.no-input {
	top: 88rpx; /* 导航栏高度 */
	height: calc(100vh - 88rpx);
}

/* 统一的内容卡片 */
.content-card {
	background-color: white;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 600rpx;
	max-height: calc(100vh - 300rpx); /* 限制最大高度 */
	overflow-y: auto; /* 内容过多时可以滚动 */
}

/* 核销码显示 */
.code-display {
	margin-bottom: 40rpx;
	padding-bottom: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.code-text {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	text-align: center;
}

/* 服务内容区域 */
.service-section {
	margin-bottom: 40rpx;
	padding-bottom: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 30rpx;
	display: block;
}

.service-name {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
	display: block;
}

.service-list {
	margin-bottom: 20rpx;
}

.service-item {
	font-size: 28rpx;
	color: #666;
	line-height: 40rpx;
	display: block;
	margin-bottom: 10rpx;
}

.service-note {
	font-size: 24rpx;
	color: #999;
	display: block;
}

/* 订单信息区域 */
.order-section {
	margin-bottom: 0;
}

.order-info {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

/* 确认核销按钮区域 */
.confirm-section {
	padding: 20rpx;
	width: 100%;
	max-width: 600rpx;
	margin-top: 20rpx;
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	background-color: #007AFF;
	color: white;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.confirm-btn:active {
	background-color: #0056CC;
}

/* 已核销按钮样式 */
.verified-btn {
	background-color: #ccc !important;
	color: #999 !important;
	cursor: not-allowed;
}

.verified-btn:active {
	background-color: #ccc !important;
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-dialog {
	width: 600rpx;
	background-color: white;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
	padding: 40rpx 40rpx 20rpx;
	text-align: center;
}

.modal-title {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.modal-content {
	padding: 20rpx 40rpx 40rpx;
	text-align: center;
}

.modal-message {
	font-size: 28rpx;
	color: #666;
	line-height: 40rpx;
	display: block;
	margin-bottom: 20rpx;
}

.modal-warning {
	font-size: 28rpx;
	color: #ff6b6b;
	font-weight: bold;
	display: block;
}

.modal-actions {
	display: flex;
	border-top: 2rpx solid #f0f0f0;
}

.cancel-btn {
	flex: 1;
	height: 88rpx;
	background-color: white;
	color: #666;
	border: none;
	border-right: 2rpx solid #f0f0f0;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cancel-btn:active {
	background-color: #f8f8f8;
}

.confirm-modal-btn {
	flex: 1;
	height: 88rpx;
	background-color: #007AFF;
	color: white;
	border: none;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.confirm-modal-btn:active {
	background-color: #0056CC;
}
</style>
